<template>
	<view class="full-page theme-1 root-style"> 
		<!-- #ifdef MP -->
		<u-navbar is-fixed :background="{background: '#00000000'}" :border-bottom="false"></u-navbar>
		<!-- #endif -->
		<user-header></user-header>
		<view class="stbar" style="padding-left:30rpx; color:#ec6d25">
			<view>学习单词:{{basedata.LS0Count+basedata.LS9Count}}个</view>
			<view style="margin-left: 20rpx;">熟词:{{basedata.LS0Count}}个</view>
			<view style="margin-left: 20rpx;">生词:{{basedata.LS9Count}}个</view> 
		</view> 
		<view style="margin:30rpx" >
			<view class="vtitle">需要复习 <text style="font-size: var(--text-14); color: #777; font-weight: normal;">({{LessList.length}}个句子)</text> </view>
			<view class="card">
				<view class="card-item" v-for="(item,index) in LessList" style="border-bottom: 1px solid #777;">
					<view style="flex:1; text-indent: 2em;">
					{{JSON.parse(item.SentenceSnapshot).SentenceEn}}<u-icon style="text-indent: 5px;" @click="handlePlay(item)" name="volume" color="#5f5d5d"></u-icon>
					</view>
					<view style="flex:1; text-indent: 2em;">{{JSON.parse(item.SentenceSnapshot).SentenceCn}}</view>
					<view style="display: flex; margin-top: 10px;">
						<view style="flex:1; text-align: center;color: #777;">第{{item.ReviewTimer}}轮</view>
						<view style="flex:1; text-align: center;color: #777;">共{{item.WordCount}}词</view>
						<view style="flex:1; text-align: center;"><u-tag @click="goreview(item)" text="复习" mode="light" /></view>
					</view> 
				</view> 
				<u-empty v-if="LessList.length == 0" text="暂 无" mode="list"></u-empty>
			</view>
		</view>
	</view>
	
	<u-tabbar
		:list="tabbar"
		:height="tabbarConfig.height"
		:icon-size="tabbarConfig.iconSize"
		:text-size="tabbarConfig.textSize"
		hide-tab-bar
	></u-tabbar>
</template>

<script setup> 
	import { ktlapi, ktluser, OT, dateFormat } from '@/utils/index.js'
	 
	import { useTabbarStore } from '@/store/tabbar';
	import { useTabbarConfig } from '@/common/hooks/tabbar-config.js';
	import { useSoundEffect } from '@/common/hooks';
	const { tabbar } = useTabbarStore();
	const { tabbarConfig } = useTabbarConfig();
	
	const LessList = ref([]);
	const basedata = ref({});
	const AccountId = ref(0);
	const LessonUUID = ref("");
	
	function goreview(item){ 
		uni.navigateTo({
			url:"/pages-review/review-test/index?uuid="+item.LessonUUID+'&SentceId='+item.SentenceIDSnapshot+'&reviewles='+LessonUUID.value+'&reviewtimer='+item.ReviewTimer
		})
	}
	const { playMp3 } = useSoundEffect();
	function handlePlay(item){
		console.log(JSON.parse(item.SentenceSnapshot).Audio)
		playMp3(JSON.parse(item.SentenceSnapshot).Audio);
	}
	
	function loadReviewLess(){
		uni.showLoading({
			title: '加载中'
		});
		ktlapi({
			apiurl:OT.CommandSet,
			action: "Cus_UseReviewList_V2",
			data: {
				"AccountId": AccountId.value, 
			}
		}).then(res => { 
			basedata.value = res.data.tables[0].table[0];
			LessList.value = res.data.tables[1].table;
			uni.hideLoading();
		});
	}
	onShareAppMessage(()=>{})
	onShow(() => { 
		
		AccountId.value = ktluser.BaseInfo().AccountID; 
		
		console.log("LessonUUID.value", LessonUUID.value);
		
		if (uni.getStorageSync("ReviewUUID")) {
			LessonUUID.value = uni.getStorageSync("ReviewUUID");
		}
		
		if(uni.getStorageSync("ReviewAccountID")){
			AccountId.value = uni.getStorageSync("ReviewAccountID"); 
		}
		
		loadReviewLess();
	})
	
</script>

<style>
	
	.full-page {
		--card-margin: 30rpx; 
		background-color: #f8f9fb !important;
	}
	
	.card{
		background-color: #fff;
		border-radius: 30rpx;
	}

	.header {
		width: 120rpx;
		height: 120rpx;
		background-image: url(https://nx5.abc5g.com/res/static/logo.png);
		background-size: 100% 100%;
		background-color: #f8f9fb !important;
		border-radius: 50%;
		;
	}
	
	.card-item{
		padding: 20rpx;
		line-height: 48rpx; 
		align-items: center;
	}
	
	.vtitle{
		font-size: var(--text-18);
		font-weight: bold;
		color:#332C2B;
		margin-bottom: 20rpx;
	}

	.good {
		margin-left: 50rpx;
		width: 120rpx;
		height: 100rpx;
		background-image: url(https://nx5.abc5g.com/res/static/good.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.studentinfo {
		margin-left: 20rpx;
		font-size: var(--text-18);
		font-weight: bold;
		color: #f8f9fb;
	}

	.stbar {
		    display: flex; 
		    background-size: 100% 100%;
		    background-repeat: no-repeat;
		    width: 90%;
		    margin: 0px auto;
		    font-size: var(--text-18);
		    align-items: center;
		    padding-left: 30rpx;
	}
</style>
